<template>
	<view class="main">
		<uni-nav-bar fixed left-icon="back" title="证书" color="#333333" backgroundColor="#FFFFFF" :border="false" statusBar
			@clickLeft="goReturn"></uni-nav-bar>
		
		<view class="cert-item" v-for="(item,index) in items" :key="index">
			<view class="cert-name">{{item.username}}</view>
			<view class="cert-no">{{item.cert_num}}</view>
			<view class="cert-num">{{item.amount}}</view>
			<view class="cert-time">{{item.id_card}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items:[],
				page:{
					pageNum:1,
					pageSize:10
				},
				isBottom:false
			}
		},
		onLoad() {
			this.page.pageNum = 1
			this.queryData()
		},
		onReachBottom() {//触底查询
			if(!this.isBottom){
				this.page.pageNum++
				this.queryData()
				console.log('触底查询.....')
			}
		},
		onPullDownRefresh() {
			this.items = []
			this.page.pageNum = 1
			this.queryData()
			setTimeout(function(){
				uni.stopPullDownRefresh();
			},1000)
		},
		methods: {
			queryData(){
				var url = '/v1/cert_list?page='+this.page.pageNum+'&page_num=' + this.page.pageSize
				this.$http.get(url,res => {
					this.isBottom = this.page.pageNum == res.data.last_page || res.data.last_page == 0
					let list = res.data.data || []
					this.items = [...this.items,...list]
				})
			},
			// 返回
			goReturn() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.cert-item{
		width: 690upx;
		height: 450upx;
		background-image: url(../../../static/img/wode/cert.png);
		background-size: 100% 100%;
		margin-top: 20upx;
		position: relative;
		.cert-title{
			width: 100%;
			font-size: 24upx;
			font-weight: 400;
			color: #333333;
			position: absolute;
			top: 80upx;
			text-align: center;
			z-index: 2;
		}
		.cert-name{
			font-size: 16upx;
			color: #333333;
			position: absolute;
			top: 170upx;
			left: 180upx;
		}
		.cert-no{
			font-size: 16upx;
			color: #333333;
			position: absolute;
			top: 168upx;
			left: 450upx;
		}
		.cert-num{
			font-size: 16upx;
			color: #333333;
			position: absolute;
			top: 200upx;
			right: 200upx;
		}
		.cert-time{
			font-size: 16upx;
			color: #333333;
			position: absolute;
			top: 200upx;
			left: 180upx;
		}
	}
</style>
